/*
* @author: xlzhao3
* @date: 2013/05/23
* @description: jquery.grid控件定义
*              2013-7-10 添加JS依赖
*/
!function ($) {
    /* jquery.grid 插件定义部分 - 开始*/
    $.fn.grid = function (option) {

        var $this = this.eq(0);
        var options = typeof option === 'object' && option;
        var _data = $this.data('__class'); // 从缓存中提取对象

        // 如果缓存中有则直接返回
        if (_data) {
            return _data;
        }

        // 判断是否存在缓存对象
        if (typeof option == 'string') {
            if (option == 'exists') {
                return false;
            }
        } else if (option == null) {
            return false;
        }

        /* Grid 类定义和属性定义 - 开始 */
        var Grid = function (element, options) {
            var _this = this;

            // 初始化配置
            this.options = $.extend({}, $.fn.grid.defaults, options);
            this.paging = this.options.paging; // 分页控件对象
            this.dataSource = this.options.dataSource; // 数据源对象
            this.columns = this.options.dataSource.columns(); // 列数组
            this.hideHeader = this.options.hideHeader; // 是否隐藏表头
            this.lineNumber = this.options.lineNumber; // 行号设置
            this.theme = this.options.theme || ''; 	// 当前主题
            this.rowStyleEnable = this.options.rowStyleEnable; ///奇偶行变色
            this.dataOptions = { 						// 默认数据设置
                pageIndex: 0
            };

            if (this.paging != null) {
                // 数据设置
                this.dataOptions = {
                    pageIndex: (this.paging.currentPage - 1) || 0,
                    pageSize: (this.paging.pageSize) || 10,
                    total: 0
                }

                // 绑定分页控件paging事件
                $(this.paging).bind('paging', $.proxy(this._pageChanging, this));
            }

            // 初始化一些属性
            this.$element = $(element).addClass('jquery-grid').addClass(this.theme); // 表格对象

            // 获取目标容器
            var renderContainer = [];
            // 如果设置了分栏，则将设置的container放到
            if (this.options.container.length > 0) {
                $.each(this.options.container, function () {
                    var container = _this.$element.find(this.selector);
                    if (container.length > 0) {
                        renderContainer.push({ container: container, limit: this.limit });
                    }
                });
            };
            // 如果没有container, 则设置默认的容器 (如果设置了容器，但是在页面上找不到，也会设置默认容器)
            if (renderContainer.length <= 0) {
                var defaultContainer = $('<div class="grid-full"></div>').appendTo(this.$element);
                renderContainer.push({ container: defaultContainer });
            }
            this.renderContainer = renderContainer;

            // 绑定数据加载完成事件
            this.$element.bind('dataLoaded', $.proxy(this._dataLoaded, this));

            // 增加清除格式的class
            this.$element.append('<div class="clear" />');

            // 生成表格
            if (!this.hideHeader) {
                this._renderHead();
            }

            this._renderData();
        }

        // Grid的属性定义
        Grid.prototype = {
            // 构造函数
            constructor: Grid,
            // 渲染Grid表头部
            _renderHead: function () {

                var self = this;

                // 开始渲染表格的列
                var colHTML = '<div class="grid-head">{0}<div>';
                var colItem = '<div class="grid-item" {0}>{1}</div>';
                var colItems = '';
                $.each(this.columns, function (index, column) {
                    colItems += colItem.format(self._getItemWidth(column), column.label);
                });
                if ($this.children()[0]) {
                    colHTML = colHTML.format(colItems);
                    $(colHTML).insertBefore($($this.children()[0]))
                } else {
                    $this.append($(colHTML).append(colItems));
                }
            },
            // 渲染数据到Grid的表主体
            _renderData: function (callback) {
                var self = this;
                // 调用dataSource.data方法
                this.dataSource.data(this.dataOptions, function (dataJSON) {
                    var rowHTML = '';
                    var start = dataJSON.start;
                    var hideLineNumber = self.lineNumber.hide;
                    var lineNumberHtml = self.lineNumber.html;
                    self.dataOptions.total = dataJSON.total;

                    // 渲染每一行数据
                    $.each(dataJSON.data, function (index, row) {
                        rowHTML += '<li class="{0}">'.format(self._getRowStyle(index));
                        var itemHtml = '';
                        if (!hideLineNumber) {
                            rowHTML += '<div class="grid-item">' + lineNumberHtml.formatEl({ number: (start + index) }) + '</div>';
                        }
                        var itemIndex = index;
                        // 渲染每一列数据
                        $.each(self.columns, function (index, column) {
                            // 判断column是字符串还是html, 又或者是formatter函数
                            if (column.formatter) {
                                itemHtml = '<div class="grid-item" {0}>' + column.formatter(row,itemIndex) + '</div>';
                            } else if (column.html) {
                                itemHtml = '<div class="grid-item " {0}>' + column.html.formatEl(row) + '</div>';
                            } else if (column.prop) {
                                itemHtml = '<li><div class="grid-item" {0}>' + row[column.prop] + '</div></li>';
                            }

                            rowHTML += itemHtml.format(self._getItemWidth(column));

                        });
                        rowHTML += '</li>';
                    });

                    // 如果没有数据, 则显示默认的提示文字
                    if (!rowHTML) {
                        rowHTML = '<li>目前还没有内容哦!</li>';
                    }

                    // 绘制分栏
                    self._renderSubField(rowHTML);

                    self.$element.trigger('dataLoaded');
                });
            },
            //获得行
            _getRowStyle: function (rowIndex) {
                var self = this;
                if (!this.rowStyleEnable) {
                    //todo:
                    return " normal ";
                }
                if (rowIndex & 1 == 1) {
                    //奇数行
                    return " odd ";

                } else {
                    return " even ";
                }
            },
            //获得grid中元素样式
            _getItemWidth: function (column) {
                if (column.width) {
                    var style = ' style="width:{0}"';
                    return style.format(column.width);
                }
                return "";
            },
            //注册行点击事件
            _regRowClickEvent: function () {
                $this.find("li").each(function () {
                    $(this).click(function () {
                        //$this.find(".click").removeAttr("style");
                        $this.find(".click").removeClass("click");
                        //$(this).attr("style", "background-color:#fdf8e2");
                        $(this).addClass("click")
                    })
                });
            },
            // 绘制分栏
            _renderSubField: function (rowHTML) {
                var self = this;

                var $rows = $(rowHTML);
                var count = $rows.length;
                var start = 0;

                $.each(self.renderContainer, function () {
                    // 清空
                    this.container.html('');

                    // 如果没有可分配的行，则结束
                    if (count < start + 1) {
                        return;
                    }

                    // 结束下标
                    var end;
                    if (!this.limit) {
                        end = Math.min(count, start + Math.ceil(count / (self.renderContainer.length)));
                    } else {
                        end = Math.min(count, start + this.limit);
                    }

                    // 把指定的行分配到容器中
                    $('<div class="grid-list"></div>').appendTo(this.container)
														.append(
															$('<ul></ul>').append($rows.slice(start, end))
														);

                    start = end; 	// 开始下标
                });
            },
            // 翻页时触发事件
            _pageChanging: function (e) {
                var self = this;
                if (self.paging != null) {
                    self.dataOptions.pageIndex = self.paging.currentPage - 1;
                }

                self._renderData(); // 重新加载和渲染数据			
            },
            // 数据加载完成时事件
            _dataLoaded: function (e) {
                var self = this;
                self._regRowClickEvent();
                if (self.paging != null) {
                    self.paging.refresh({ currentPage: self.dataOptions.pageIndex + 1, total: self.dataOptions.total });
                }
            },
            // 重新加载数据, 初始化页面和分页控件, 类似于刷新
            reload: function () {
                this.dataOptions.pageIndex = 0;
                this._pageChanging(); // 重新加载和渲染数据
            }
        }
        /* Grid 类定义和属性定义 - 结束 */

        // 如果缓存中没有, 则new一个, 将对象存入缓存
        $this.data('__class', (_data = new Grid($this, options)))
        return _data;

    }
    /* jquery.grid 插件定义部分 - 结束*/

    // 默认设置
    $.fn.grid.defaults = {
        theme: null,
        dataSource: null,
        paging: null,
        // 分栏的设置
        container: [],
        // 是否隐藏表头
        hideHeader: false,
        // 行号设置
        lineNumber: {
            // 是否隐藏
            hide: true,
            // 行号的html样式
            html: ''
        },
        //奇偶行样式不同 是否开启默认不开启
        rowStyleEnable: false
    };

} (jQuery);